<template>
    <div class="product_items">
        <!-- 产品列表渲染 -->
        <div class="product" 
        @click="$router.push('/product/'+product.action.path)"
        v-for="(product,index) in list" :key="index">
            <img v-lazy="product.img_url">
            <p>{{ product.product_name }}</p>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        list:{type:Array,default(){return []}}
    }
}
</script>
<style lang="scss" scoped>
.product_items{
    display: flex;
    flex-wrap: wrap;
    .product{
        // 锁定宽度为33%
        flex-basis: 33%;
        width:33%;
        max-width: 33%;
        font-size: .2rem;
        color:#777;
        text-align: center;
        img{
            width: 80%;
            min-height: 70px;
            margin: 0 auto;
        }
        
    }
}

</style>